<template>
    <div class="content">
        <h3 class="advert-label">{{'TRANSACTION_TYPE'|t}}：</h3>
        <div class="box-flex mb-10 mt-10 advert-filter">
            <div class="flex flex-item" v-for='(item,key) of flexTab' :key='key' :class="defalutIndex==item.id?'active':''" @click='defalutIndex=item.id'>{{item.name|t}}</div>
        </div>
        <div class="advert-form">
            <zx-form-group :title="$t('CURRENCY_PLACE')" class="boxShadow">
                <zx-select :place="$t('CURRENCY_PLACE')" v-model="advertForm.coinType" ref='coinType' :rules="rules.coinType">
                    <zx-option :value="item.coin_no" v-for='(item,key) of allCoinTypeList' :key='key'>{{item.coin_core}}</zx-option>
                </zx-select>
            </zx-form-group>
            <zx-form-group :title="$t('CURRENCYS')">
                <zx-input v-model="defaultText" type="text" disabled></zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('PREMIUM')">
                <span slot="label-text">{{'PREMIUM_DESC'|t}}</span>
                <div class="form-input-wrap box-flex">
                    <div class="range flex">
                        <mt-range v-model="premium" :min="0" :max="100" :step="10" :bar-height="2">
                        </mt-range>
                    </div>
                    <div class="range-input-wraps">
                        <zx-input type="hidden" class="range-input" v-model="advertForm.premium" ref='premium' :rules="rules.premium" :place="$t('PREMIUM')"></zx-input>
                        <input class="range-input" v-model="premium" type="number" />
                        <span>%</span>
                    </div>
                </div>
            </zx-form-group>
            <zx-form-group :title="$t('ADVERT_PRICE')">
                <span slot="label-text">{{'ADVERT_PRICE_DESC'|t}}</span>
                <zx-input v-model="advertForm.price" type="number" :place="$t('ADVERT_PRICE_PLACE')" ref='price' :rules="rules.price">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('NUM')">
                <zx-input v-model="advertForm.num" type="number" :place="$t('NUM_PLACE')" ref='num' :rules="rules.num">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('MINIMUN_LIMIT')">
                <span slot="label-text">{{'MINIMUN_LIMIT_DESC'|t}}</span>
                <zx-input v-model="advertForm.minLimit" type="number" :place="$t('MINIMUN_LIMIT_PLACE')" ref='minLimit' :rules="rules.minLimit">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('MAX_LIMIT')">
                <span slot="label-text">{{'MAX_LIMIT_PLACE'|t}}</span>
                <zx-input v-model="advertForm.maxLimit" type="number" :place="$t('MAX_LIMIT_DESC')" ref='maxLimit' :rules="rules.maxLimit">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('PAGEMENT_METHODS')" class="boxShadow">
                <zx-select :place="$t('CHOICE_RECEIVABLE')" v-model="advertForm.payWay" ref='payWay' :rules="rules.payWay">
                    <zx-option value="1">{{'BANKTRANSFER'|t}}</zx-option>
                    <zx-option value="2">{{'ALI_PAY'|t}}</zx-option>
                    <zx-option value="3">{{'WECHATPAY'|t}}</zx-option>
                </zx-select>
            </zx-form-group>
            <zx-form-group :title="$t('BANKS')" class="boxShadow" v-show="advertForm.payWay=='1'">
                <zx-select :place="$t('BANKS_SELECT_PLACE')" v-model="advertForm.bankId" ref='bankId' :rules="rules.bankId">
                    <zx-option :value="item.id" v-for="(item,key) of bankList" :key='key'>{{item.bank_num}} {{item.bank}}</zx-option>
                </zx-select>
            </zx-form-group>
            <zx-form-group :title="$t('AD_MESSAGE')">
                <zx-input v-model="advertForm.desc" type="textarea" :place="$t('AD_MESSAGE_PLACE')" ref='desc' :rules="rules.desc">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('USER_TRADE_PASS')">
                <zx-input v-model="advertForm.dealPsw" type="password" :place="$t('USER_TRADE_PASS_PLACE')">
                </zx-input>
            </zx-form-group>
            <zx-form-group>
                <input type="button" class="submit-btn mt-20 green-btn radius" :value="$t('IMMEDIATELY_BINGDING')" @click="submitForm('advertForm')">
            </zx-form-group>
        </div>
    </div>
</template>
<script>
    import { Form, Func, Auth, Rules } from '@/providers';
    import { C2c, Coins } from '@/services';
    export default {
        data() {
            return {
                flexTab: [
                    { id: 1, name: 'ONLINE_SALE' },
                    { id: 2, name: 'ONLINE_BUY' }
                ],
                allCoinTypeList: [],
                defalutIndex: 1,
                values: '',
                name: '',
                defaultText: this.$t('DEFAULT_PCNY'),
                bankList: [],
                premium: 0,
                advertForm: {
                    coinType: '',
                    premium: '0',
                    price: '',
                    num: '',
                    minLimit: '',
                    maxLimit: '',
                    payWay: '',
                    bankId: '0',
                    desc: '',
                    dealPsw: ''
                },
                rules: Rules
            };
        },
        watch: {
            premium(newVal, oldVal) {
                if (!/^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/.test(newVal)) {
                    if (newVal) {
                        newVal = oldVal;
                    }
                }
                this.premium = newVal;
                this.advertForm.premium = this.premium;
            }
        },
        methods: {
            async submitForm(formName) {
                if (!Form.validataForm(this, formName)) {
                    return false;
                }
                let _parmas = this[formName];
                let pathParmas, tradeType;
                if (this.defalutIndex == 1) {
                    // 发布出售广告
                    tradeType = 'sell';
                    pathParmas = 'buy';
                } else if (this.defalutIndex == 2) {
                    // 发布购买广告
                    tradeType = 'buy';
                    pathParmas = 'sell';
                }
                console.log(this[formName]);
                try {
                    let res = await C2c.AddSpotEntrust({
                        userNo: Auth.getItem('userId'),
                        coinNo: _parmas.coinType,
                        tradeType: tradeType,
                        tradePrice: _parmas.price,
                        tradeNum: _parmas.num,
                        dealPwd: Func.PasswordEncrypt(_parmas.dealPsw),
                        entrustRange: (_parmas.premium / 100.0).toFixed(2),
                        receivablesType: _parmas.payWay,
                        bankId: _parmas.payWay == '1' ? _parmas.bankId : '0',
                        minPirce: _parmas.minLimit,
                        maxPrice: _parmas.maxLimit,
                        securityState: 1,
                        remark: _parmas.desc,
                        token: Auth.getItem('token')
                    });
                    if (!Form.checkResToken(res)) return false;
                    Form.Totas(res.desc, () => {
                        console.log('路由跳转');
                        this.$router.push({ path: '/c2c', query: { type: pathParmas } });
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取币种列表
            async GetAllCoinType() {
                try {
                    let res = await Coins.GetAllCoinType({
                        token: Auth.getItem('token')
                    });
                    this.allCoinTypeList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取银行卡列表
            async GetUserBank() {
                try {
                    let res = await C2c.GetUserBank({
                        userNo: Auth.getItem('userId')
                    });
                    this.bankList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            async getData() {
                this.GetAllCoinType();
                this.GetUserBank();
            }
        },
        created() {
            this.getData();
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/sass/c2c.scss";
</style>